<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
	<title>自定义网页右键菜单</title>
	<style type="text/css">
		/*body, div, ul, li { margin:0; padding:0; }*/
		/*body { font:14px/1.5 arial,sans-serif; }*/
		ul { list-style-type:none; }
		/*#cen {font-size:36px; color:#60F; text-align:center;}*/
		#div{
			padding: 20px 0px 20px 20px;
			font:18px arial,sans-serif;
			border:1px solid #bfbfbf;
			border-radius:5px;
		}
		#div1{ 
			position:absolute; 
			display:none; 
		}
		#div1 ul { 
			font:14px/1.5 arial,sans-serif;
			position:absolute; 
			float:left; 
			border:1px solid #bfbfbf;
			padding:2px; 
			background-color: white; 
			/*box-shadow:2px 2px 2px rgba(0, 0, 0, .6); */
			width:230px; 
			border-radius:5px;
			overflow:hidden; 
			white-space:nowrap;
	    	text-overflow:ellipsis;
		}
		#div1 ul li { 
			float:left; 
			clear:both; 
			height:24px; 
			cursor:pointer; 
			line-height:24px; 
			white-space:nowrap; 
			padding:0 20px; 
			width:100%; 
			display:inline-block; 
		}
		#div1 ul li:hover { 
			background:#E6EDF6; 
			border:1px solid #B4D2F6; 
		}
	</style>
	<script type="text/javascript">
	    window.onload=function(){
	    	for (var i = document.getElementById('u').childNodes.length - 1; i >= 0; i--) {
				if(document.getElementById('u').childNodes[i].tagName =='LI'){
					document.getElementById('u').childNodes[i].onclick=function(){
					alert(this.innerHTML);
				}
		    }
		}
	    }
		function menu(event)
		{
			var e = event || window.event;
			var oDiv=document.getElementById('div1');   
			oDiv.style.display='block';
			if(document.documentElement.clientWidth < e.clientX+230 && document.documentElement.clientHeight<(e.clientY+24*2)){
				oDiv.style.left=(e.clientX - 230)+'px';
			    oDiv.style.top=(e.clientY - 24*2)+'px';   
			}
			else if(document.documentElement.clientWidth < e.clientX+230 && document.documentElement.clientHeight>=(e.clientY+24*2)){
				oDiv.style.left=(e.clientX - 230)+'px';
			    oDiv.style.top=e.clientY+'px';   
			}
			else if(document.documentElement.clientWidth >= e.clientX+230 && document.documentElement.clientHeight<(e.clientY+24*2)){
				oDiv.style.left=e.clientX+'px';
			    oDiv.style.top=(e.clientY - 24*2)+'px'; 
			}
			else{
				oDiv.style.left=e.clientX+'px';
				oDiv.style.top=e.clientY+'px';   
		    }
			e.returnValue = false;
		}
		document.onclick=function ()
		{
			var oDiv=document.getElementById('div1');   
			oDiv.style.display='none';
		};
		
	</script>
</head>
<body>
<div id="div" oncontextmenu="menu()">鼠标右键点击此处查看菜单</div>
<div id="div1">
      <ul id="u">
           <li>菜单1</li>
           <li>菜单2</li>
     </ul>
</div>
</body>
</html>